<template>
    <el-dialog title="字幕配置" v-model="dialogVisible" width="38%">
        <div class="subtitlesettings">
            <!-- 第1行 -->
            <el-row class="subtitlesettings-row">
                <el-col :span="12" class="subtitlesettings-left">
                    <div class="subtitlesettings-text-left">
                        <el-text tag="b">字幕长度设置</el-text>
                    </div>
                    <div class="subtitlesettings-text-left subtitlesettings-center-align">
                        <el-text>不开启，则使用系统默认方式生成</el-text>
                    </div>
                </el-col>
                <el-col :span="12" class="subtitlesettings-right">
                    <el-switch v-model="subtitleSettingsLengthSetting"
                        class="subtitlesettings-center-align"></el-switch>
                </el-col>
            </el-row>

            <!-- 第2行 -->
            <div v-if="subtitleSettingsLengthSetting">
                <el-row class="subtitlesettings-row">
                    <el-col :span="12" class="subtitlesettings-left">
                        <div style="display: flex;flex-direction: row;justify-content: left;">
                            <el-text tag="b">每行字幕长度最长</el-text>
                        </div>
                    </el-col>
                    <el-col :span="12" class="subtitlesettings-right">
                        <el-input-number v-model="subtitleSettingsMaxLineLength" :min="7" :max="18"
                            :step="1"></el-input-number>
                    </el-col>
                </el-row class="subtitlesettings-row">
                <el-row class="subtitlesettings-row">
                    <el-col :span="24" class="subtitlesettings-left">
                        <el-text>设置生效后，生成字幕时将以此配置来生成每句字幕长度；此设置可能会有2-3个字符的误差如设置15，每行字幕最长为15-17个字符。</el-text>
                    </el-col>
                </el-row>
            </div>

            <!-- 第3行 -->
            <el-row class="subtitlesettings-row">
                <el-col :span="12" class="subtitlesettings-left">
                    <el-text tag="b">留白配置</el-text>
                </el-col>
                <el-col :span="12" class="subtitlesettings-right">
                    <el-switch v-model="subtitleSettingsBlankSpaceSetting"
                        class="subtitlesettings-center-align"></el-switch>
                </el-col>
            </el-row>

            <!-- 第4行 -->
            <el-row class="subtitlesettings-row">
                <el-col :span="12" class="subtitlesettings-left">
                    <el-text tag="b">绿幕视频字幕配置</el-text>
                </el-col>
                <el-col :span="12" class="subtitlesettings-right">
                    <el-switch v-model="subtitleSettingsVideoSubtitleSettings"
                        class="subtitlesettings-center-align"></el-switch>
                </el-col>
            </el-row>

            <!-- 第5行 -->
            <div v-if="subtitleSettingsVideoSubtitleSettings" class="subtitlesettings-row">
                <el-row class="subtitlesettings-row">
                    <el-col :span="12" class="subtitlesettings-left">
                        <el-button @click="subtitleSettingsShowFontSelector"
                            style="width: 100px;margin-right: 10px;">字体
                        </el-button>
                        <!-- 字体库选择 -->
                        <FontLibrary ref="fontLibraryRef" @selectedFont="selectedFont"/>
                    </el-col>
                    <el-col :span="12" class="subtitlesettings-left">
                        <div style="display:flex;flex-direction: row;justify-content: left;align-items: center;margin-left: 10px;">
                            <span class="demonstration" style="margin-right: 6px;">字体颜色</span>
                            <el-color-picker v-model="foregroundColor"/>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <!-- 第6行 -->
            <el-row>
                <el-col :span="24" class="subtitlesettings-right">
                    <div style="display: flex; justify-content: right; align-items: center;">
                        <el-button @click="subtitleSettingsCancel" style="width: 100px;">取消</el-button>
                        <el-button type="primary" @click="subtitleSettingsConfirm" style="width: 100px;">确定</el-button>
                    </div>

                </el-col>
            </el-row>
        </div>
    </el-dialog>
</template>

<script lang="ts">
export default {
    name: "SubtitleSettings"
};
</script>

<script setup lang="ts">
import { ref } from 'vue';
// 字体库选择
import FontLibrary from './FontLibrary.vue';

// 控制字幕设置对话框的显示状态
const dialogVisible = ref(false);
// 控制字幕长度设置的开关状态
const subtitleSettingsLengthSetting = ref(false);
// 设置每行字幕的最大长度
const subtitleSettingsMaxLineLength = ref(18);
// 控制留白配置的开关状态
const subtitleSettingsBlankSpaceSetting = ref(false);
// 控制绿幕视频字幕配置的开关状态
const subtitleSettingsVideoSubtitleSettings = ref(false);
// 字幕前景色
const foregroundColor = ref('#409EFF');
// 获取当前选中的字体
const fontName = ref('');
// 字体库选择组件
const fontLibraryRef=ref(null);

// 弹出字体选择框的逻辑
const subtitleSettingsShowFontSelector = () => {
    // TODO: 弹出字体选择框的逻辑
    if(fontLibraryRef.value){
        fontLibraryRef.value.openDialog();
    }
};

// 弹出颜色选择框的逻辑
const subtitleSettingsShowColorPicker = () => {
    // TODO: 弹出颜色选择框的逻辑
};

// 取消按钮的逻辑
const subtitleSettingsCancel = () => {
    dialogVisible.value = false;
};

// 确定按钮的逻辑
const subtitleSettingsConfirm = () => {
    // TODO: 确定按钮的逻辑
    dialogVisible.value = false;
};

function selectedFont(font: string){
    console.log('选中的字体库:', font);
    fontName.value = font;
}

// 暴露dialogVisible变量以便外部访问
defineExpose({
    dialogVisible
})

</script>

<style scoped>
.subtitlesettings .subtitlesettings-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
}

.subtitlesettings-row2 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
}

.subtitlesettings .subtitlesettings-col {
    flex: 1;
}

.subtitlesettings .subtitlesettings-left {
    text-align: left;
}

.subtitlesettings .subtitlesettings-right {
    justify-content: right;
    text-align: right;
}

.subtitlesettings .subtitlesettings-center-align {
    display: flex;
    justify-content: right;
    align-items: center;
}

.subtitlesettings .subtitlesettings-text-left {
    text-align: left;
}

.subtitlesettings .subtitlesettings-row:nth-child(1) .subtitlesettings-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.subtitlesettings .subtitlesettings-row:nth-child(1) .subtitlesettings-center-align {
    margin-top: 5px;
}

.subtitlesettings .subtitlesettings-row:nth-child(5) {
    flex-direction: column;
    align-items: flex-start;
}
</style>